<template>
    <div class="container">
      <div class="flex-item">
        <div style="width: 100%; height: 100%" ref="eachartsall"></div>
      </div>
      <div class="flex-item">
        <div style="width: 100%; height: 100%" ref="chartDom"></div>
      </div>
    </div>
  </template>
      
    <script>
  import * as echarts from "echarts";
  export default {
    name: "HelloWorld",
    data() {
      return {
        option: {
          title: {
            text: "库存总数统计",
            left: "left",
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              name: "库存总数统计",
              type: "pie",
              radius: "40%",
              center: ["50%", "60%"],
              data: [
                { value: 335, name: "一年内" },
                { value: 310, name: "半年内" },
                { value: 234, name: "三个月内" },
                { value: 135, name: "一个月内" },
                { value: 1548, name: "一星期内" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        },
        option1: {
          title: {
            text: "库存总数统计",
            left: "left",
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              name: "库存总数统计",
              type: "pie",
              radius: "40%",
              center: ["50%", "60%"],
              data: [
                { value: 335, name: "一年内" },
                { value: 310, name: "半年内" },
                { value: 234, name: "三个月内" },
                { value: 135, name: "一个月内" },
                { value: 1548, name: "一星期内" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        },
        tableData: [],
        wareHouseId: localStorage.getItem,
      };
    },
    mounted() {
      this.initmyEcharts();
    },
    methods: {
      initmyEcharts() {
        this.myChart = echarts.init(this.$refs.eachartsall);
        this.myChart.setOption(this.option1);
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      },
    },
    beforeDestroy() {
      /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
        容易导致内存泄漏和额外CPU或GPU占用哦 */
      window.removeEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  };
  </script>
      
    <style lang="scss" scoped>

  </style>
      